<template>
	<div class="footer">
		<!-- 底部模块 start-->
		<div class="footer">
		    <div class="w">
		        <!-- mod_service模块 -->
		        <div class="mod_service">
		            <ul>
		                <li>
		                    <h5></h5>
		                    <div class="service_txt">
		                        <h4>正品保障</h4>
		                        <p>正品保障,提供发票</p>
		                    </div>
		                </li>
		                <li>
		                    <h5></h5>
		                    <div class="service_txt">
		                        <h4>极速物流</h4>
		                        <p>急速物流,急速送达</p>
		                    </div>
		                </li>
		                <li>
		                    <h5></h5>
		                    <div class="service_txt">
		                        <h4>无达售后</h4>
		                        <p>7天无理由退换货</p>
		                    </div>
		                </li>
		                <li>
		                    <h5></h5>
		                    <div class="service_txt">
		                        <h4>特色服务</h4>
		                        <p>私人定制家电套装</p>
		                    </div>
		                </li>
		                <li>
		                    <h5></h5>
		                    <div class="service_txt">
		                        <h4>帮助中心</h4>
		                        <p>您的购物指南</p>
		                    </div>
		                </li>
		            </ul>
		        </div>
		        <!-- mod_help模块 -->
		        <div class="mod_help">
		            <dl>
		                <dt>购物指南</dt>
		                <dd><a href="#">购物流程</a></dd>
		                <dd><a href="#">会员介绍</a></dd>
		                <dd><a href="#">生活旅行/团购</a></dd>
		                <dd><a href="#">常见问题</a></dd>
		                <dd><a href="#">大家电</a></dd>
		                <dd><a href="#">联系客服</a></dd>
		            </dl>
		            <dl>
		                <dt>购物指南</dt>
		                <dd><a href="#">购物流程</a></dd>
		                <dd><a href="#">会员介绍</a></dd>
		                <dd><a href="#">生活旅行/团购</a></dd>
		                <dd><a href="#">常见问题</a></dd>
		                <dd><a href="#">大家电</a></dd>
		                <dd><a href="#">联系客服</a></dd>
		            </dl>
		            <dl>
		                <dt>购物指南</dt>
		                <dd><a href="#">购物流程</a></dd>
		                <dd><a href="#">会员介绍</a></dd>
		                <dd><a href="#">生活旅行/团购</a></dd>
		                <dd><a href="#">常见问题</a></dd>
		                <dd><a href="#">大家电</a></dd>
		                <dd><a href="#">联系客服</a></dd>
		            </dl>
		            <dl>
		                <dt>购物指南</dt>
		                <dd><a href="#">购物流程</a></dd>
		                <dd><a href="#">会员介绍</a></dd>
		                <dd><a href="#">生活旅行/团购</a></dd>
		                <dd><a href="#">常见问题</a></dd>
		                <dd><a href="#">大家电</a></dd>
		                <dd><a href="#">联系客服</a></dd>
		            </dl>
		            <dl>
		                <dt>购物指南</dt>
		                <dd><a href="#">购物流程</a></dd>
		                <dd><a href="#">会员介绍</a></dd>
		                <dd><a href="#">生活旅行/团购</a></dd>
		                <dd><a href="#">常见问题</a></dd>
		                <dd><a href="#">大家电</a></dd>
		                <dd><a href="#">联系客服</a></dd>
		            </dl>
		            <dl>
		                <dt>帮助中心</dt>
		                <dd>
		                    <img src="../assets/wx_cz.jpg">
		                </dd>
		                <dd><a href="#">品优购客户端</a></dd>
		            </dl>
		        </div>
		        <!-- 版权信息模块 -->
		        <div class="mod_copyright">
		            <div class="links ">
		                <ul class="clearfix">
		                    <li><a>关于我们</a></li>
		                    <li></li>
		                    <li><a>联系我们</a></li>
		                    <li></li>
		                    <li> <a>联系客服</a></li>
		                    <li></li>
		                    <li><a>商家入驻</a></li>
		                    <li></li>
		                    <li><a>营销中心</a></li>
		                    <li></li>
		                    <li>手<a>机品优购</a></li>
		                    <li></li>
		                    <li><a>友情链接</a></li>
		                    <li></li>
		                    <li><a>销售联盟</a></li>
		                    <li></li>
		                    <li><a>品优购社区</a></li>
		                    <li></li>
		                    <li><a>品优购公益</a></li>
		                    <li></li>
		                    <li><a>English Site</a></li>
		                    <li></li>
		                    <li><a>Contact U</a></li>
		                </ul>
		            </div>
		            <div class="copyright">
		                <div>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</div>
		                <div>京ICP备08001421号京公网安备110108007702</div>
		            </div>
		        </div>
		    </div>
		</div>
		<!-- 底部模块 stop-->
	</div>
</template>

<script>
	export default {
		name: 'Myfooter'
	}
</script>

<style scoped>
	/* footer模块 */
	.footer {
	    height: 415px;
	    background-color: #f5f5f5;
	    padding-top: 30px;
	}
	
	.mod_service {
	    height: 80px;
	    border-bottom: 1px solid #ccc;
	}
	
	.mod_service li {
	    float: left;
	    width: 240px;
	    height: 50px;
	    /* background-color: pink; */
	    padding-left: 35px;
	}
	.mod_service li h5 {
	    float: left;
	    width: 50px;
	    height: 50px;
	    margin-right: 8px;
	}
	.mod_service li:nth-of-type(1) h5 {
	    background: url(../assets/img_02.png) no-repeat -253px -3px;
	}
	.mod_service li:nth-of-type(2) h5 {
	    background: url(../assets/img_02.png) no-repeat -254px -54px;
	}
	.mod_service li:nth-of-type(3) h5 {
	    background: url(../assets/img_02.png) no-repeat -257px -106px;
	}
	.mod_service li:nth-of-type(4) h5 {
	    background: url(../assets/img_02.png) no-repeat -258px -156px;
	}
	.mod_service li:nth-of-type(5) h5 {
	    background: url(../assets/img_02.png) no-repeat -256px -208px;
	}
	.service_txt h4 {
	    margin-top: 5px;
	    font-size: 14px;
	}
	.service_txt p {
	    font-size: 12px;
	}
	
	
	.mod_help {
	    height: 185px;
	    border-bottom: 1px solid #ccc;
	    padding-top: 20px;
	    padding-left: 50px;
	}
	
	.mod_help dl dt {
	    font-size: 16px;
	    margin-bottom: 10px;
	}
	.mod_help dl {
	    float: left;
	    width: 200px;
	}
	.mod_help dl:last-child {
	    width: 89px;
	}
	
	.mod_copyright .links {
	    margin-top: 20px;
	    margin-left: 110px;
	}
	.mod_copyright li{
	    float: left;
	}
	.mod_copyright .links li:nth-child(even){
	    width: 1px;
	    height: 12px;
	    background-color: #999999;
	    margin: 3px 16px;
	}
	.copyright{
	    margin-left: 235px;
	    margin-top: 15px;
	}
	.copyright div:last-child {
	    line-height: 20px;
	    padding-left: 230px;
	}
</style>